<template>
    <div>
        <template v-if="adminIsLogin === true">
            <main class="fx">
                标题：
                <el-input size="small" v-model="article_blog.title" placeholder="请输入内容"
                          style="width: 300px;"></el-input>
                <br>
                作者：{{article_blog.author}}
                <br>
                分类：
                <el-radio-group v-model="sort_id">
                    <el-radio v-for="(s,index) in sort" :key="index" :label="s.name">{{s.name}}</el-radio>
                </el-radio-group>
                <br>
                内容：
                <!-- 需要绑定一个ue obj对象 -->
                <ueditor :config="configs" ref="ue_obj" :defaultContent="this.$route.params.article_content"/>
                <el-button size="small" type="success" @click="saveTest()">提交</el-button>
            </main>
        </template>
        <template v-else>
            不能进行修改
        </template>
    </div>
</template>

<script>
    import {API} from "../../public/js/BlogApi";
    import {saveArticle} from "../service/getData";

    /**
     * ref，是指，将子组件，本身的实例，绑定到一个对象上，就可以使用this.$refs.对象实例.子组件方法();，来调用子组件的方法。
     * emit，子组件也可以用this.$emit("调用方法",参数)，传参给父组件
     * */
    export default {
        name: "news_article",
        props: {
            p_article_title: {
                type: String,
                default: '',
            }, p_article_con: {
                type: String,
                default: '',
            }
        },
        data() {
            return {
                configs: {
                    /*//可以在此处定义工具栏的内容
                    toolbars: [
                        ['fullscreen', 'source','|', 'undo', 'redo','|','bold', 'italic', 'underline', 'fontborder', 'strikethrough',
                        '|','superscript','subscript','|', 'forecolor', 'backcolor','|', 'removeformat','|', 'insertorderedlist', 'insertunorderedlist',
                        '|','selectall', 'cleardoc','fontfamily','fontsize','justifyleft','justifyright','justifycenter','justifyjustify','|',
                        'link','unlink']
                    ],*/
                    autoHeightEnabled: false,
                    autoFloatEnabled: true,　　//是否工具栏可浮动
                    initialContent: '请输入内容',   //初始化编辑器的内容,也可以通过textarea/script给值，看官网例子
                    autoClearinitialContent: true, //是否自动清除编辑器初始内容，注意：如果focus属性设置为true,这个也为真，那么编辑器一上来就会触发导致初始化的内容看不到了
                    initialFrameWidth: null,
                    initialFrameHeight: 800,
                    BaseUrl: '',
                    UEDITOR_HOME_URL: '/ue/'
                },
                sort: '',
                sort_id: '',
                article_blog: {
                    author: this.$store.state.userName,
                    title: this.$route.params.article_title,
                    count_good: '0',
                    count_view: '0',
                    o_img: '/',
                    sort_id: this.sort_id,
                    content: '',
                    a_url: 1001
                },
                adminIsLogin: this.$store.state.userIslogin,
            }
        },
        methods: {
            saveBlog: function () {
                // 获取文章内容
                this.article_blog.content = this.$refs.ue_obj.getUEContent();
                this.$post(API.saveBlogUrl, this.article_blog).then((res) => {
                    alert(res.msg)
                })
            },
            saveTest: function () {
                // 获取文章内容
                this.article_blog.content = this.$refs.ue_obj.getUEContent();
                saveArticle(this.article_blog).then((res) => {
                    alert(res.msg);
                    this.$router.push("/list.html");
                })
            }
            ,
            /**
             * 上面的那种提交方式封装的有问题，正常json是
             *      直接username:value，password:value那种
             * 错误的{data}封装，会出现一个data:{username:value,password:value}，正确的参数应该是data，而不是{data}
             */

            /**
             * 获取分类列表
             */
            getSort: function () {
                this.$get(API.sortUrl, {currentpage: 1}).then((res) => {
                    this.sort = res.data.content
                })
            },
        }, mounted() {
            /**
             * $route为当前router跳转对象里面可以获取name、path、query、params等
             * $router为VueRouter实例，想要导航到不同URL，则使用$router.push方法
             */
            console.log(this.$route.params.article_title);
            this.getSort();
        }
    }
</script>

<style scoped>
    .fx {
        width: 100%
    }
</style>
